<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            cursor: pointer;
            position: absolute;
        }
        #div1{
            background: deeppink;
        }
        #div2{
            background: skyblue;
        }
    </style>
</head>
<body>
<!--<div id="div1"></div>-->
<div id="div2"></div>

<script src="js/drag.js"></script>
  <script>

      /*new Drag('div1');*/
      new LimitDrag('div2');

      function LimitDrag(id) {
          Drag.call(this,id);
      }
      for(var i in Drag.prototype){
          LimitDrag.prototype[i] = Drag.prototype[i];
      }

      LimitDrag.prototype.fnMove = function (ev) {
          var oEvent = ev||event;

          var l = oEvent.clientX -  this.disX;
          var t = oEvent.clientY -  this.disY;

          if(l<0){
              l=0;
          }
          else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){
              l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
          }

          this.oDiv.style.left = l+'px';
          this.oDiv.style.top = t +'px';


      }


  </script>
</body>
</html>